<template>
<div class="container">
  <el-row>
    <el-col :span="12" :offset="6">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <el-table
            :data="violations">
            <el-table-column
              prop="type"
              label="违规类型"
              width="180">
            </el-table-column>
            <el-table-column
              prop="time"
              label="违规次数"
              width="180">
            </el-table-column>
          </el-table>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>
<script type="text/javascript">
export default {
  props: ['violationMap'],
  created () {
    console.log(this.violationMap)
  },
  computed: {
    violations () {
      return [{
        type: '超速',
        time: this.violationMap[1]
      },
      {
        type: '急加速',
        time: this.violationMap[2]
      },
      {
        type: '急减速',
        time: this.violationMap[3]
      },
      {
        type: '急刹车',
        time: this.violationMap[4]
      },
      {
        type: '急转弯',
        time: this.violationMap[5]
      }
      ]
    }
  },

  data () {
    return {
      // // 违规数据
      // violations: [{
      //   type: '超速',
      //   time: this.violationMap[1]
      // },
      // {
      //   type: '急加速',
      //   time: 0
      // },
      // {
      //   type: '急减速',
      //   time: 1
      // },
      // {
      //   type: '急刹车',
      //   time: 0
      // },
      // {
      //   type: '急转弯',
      //   time: 5
      // }
      // ]
    }
  }
}
</script scoped>
<style type="text/css" scoped>
 .box-card{
  width: 70%;
  margin: 10px;
  border-radius: 10px; 
}
</style>
